<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
      integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
      integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
      crossorigin=""
    ></script>
    <script src="leaflet.ChineseTmsProviders.js"></script>
  </head>
  <body>
    <div id="map" style="height: 800px; width: 800px"></div>
    <div>
      <button id="buttonOne">查看所有的点位信息</button>
      <button id="buttonTwo">查看路径</button>
      <button id="buttonThree">清除所有点位</button>
      <button id="buttonFour">清除路径</button>
    </div>
    <script>
      /**
       * 智图地图内容
       */
      var normalm1 = L.tileLayer.chinaProvider('Geoq.Normal.Map', {
        maxZoom: 18,
        minZoom: 5,
      })
      var normalm2 = L.tileLayer.chinaProvider('Geoq.Normal.Color', {
        maxZoom: 18,
        minZoom: 5,
      })
      var normalm3 = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', {
        maxZoom: 18,
        minZoom: 5,
      })
      var normalm4 = L.tileLayer.chinaProvider('Geoq.Normal.Gray', {
        maxZoom: 18,
        minZoom: 5,
      })
      var normalm5 = L.tileLayer.chinaProvider('Geoq.Normal.Warm', {
        maxZoom: 18,
        minZoom: 5,
      })
      var normalm6 = L.tileLayer.chinaProvider('Geoq.Normal.Cold', {
        maxZoom: 18,
        minZoom: 5,
      })
      /**
       * 天地图内容
       */
      var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
          maxZoom: 18,
          minZoom: 5,
        }),
        normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
          maxZoom: 18,
          minZoom: 5,
        }),
        imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
          maxZoom: 18,
          minZoom: 5,
        }),
        imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
          maxZoom: 18,
          minZoom: 5,
        })

      var normal = L.layerGroup([normalm, normala]),
        image = L.layerGroup([imgm, imga])
      /**
       * 谷歌
       */
      var normalMap = L.tileLayer.chinaProvider('Google.Normal.Map', {
          maxZoom: 18,
          minZoom: 5,
        }),
        satelliteMap = L.tileLayer.chinaProvider('Google.Satellite.Map', {
          maxZoom: 18,
          minZoom: 5,
        })
      /**
       * 高德地图
       */
      var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
        maxZoom: 18,
        minZoom: 5,
      })
      var Gaodimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
        maxZoom: 18,
        minZoom: 5,
      })
      var Gaodimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
        maxZoom: 18,
        minZoom: 5,
      })
      var Gaodimage = L.layerGroup([Gaodimgem, Gaodimga])

      var baseLayers = {
        智图地图: normalm1,
        智图多彩: normalm2,
        智图午夜蓝: normalm3,
        智图灰色: normalm4,
        智图暖色: normalm5,
        智图冷色: normalm6,
        天地图: normal,
        天地图影像: image,
        谷歌地图: normalMap,
        谷歌影像: satelliteMap,
        高德地图: Gaode,
        高德影像: Gaodimage,
      }

      var map = L.map('map', {
        center: [30.254906, 120.192644], //,
        zoom: 16,
        layers: [Gaode],
        zoomControl: false,
      })

      // L.control.layers(baseLayers, null).addTo(map);

      L.control
        .zoom({
          zoomInTitle: '放大',
          zoomOutTitle: '缩小',
        })
        .addTo(map)
      // 创建点击事件
      let latlngArr = []
      map.on('click', function (params) {
        latlngArr.push([params.latlng.lat, params.latlng.lng])
        console.log(latlngArr)
      })

      // 创建点位图层  最近一个小时内人脸识别点位信息
      latlngArr = [
        [30.257570556118647, 120.19307971000673],
        [30.257496418208436, 120.1929295063019],
        [30.25732960770581, 120.19289195537569],
        [30.257144262370627, 120.19287049770357],
        [30.257056223213887, 120.19285440444948],
        [30.256931114802786, 120.19284367561342],
        [30.256796738924457, 120.1928061246872],
        [30.25660212525752, 120.19276320934297],
        [30.255777329722196, 120.19279539585114],
        [30.255777329722196, 120.19414722919466],
      ]

      var myIcon = L.icon({
        iconUrl: './img/red.png',
        iconSize: [38, 38],
        // iconAnchor: [22, 94],
        // popupAnchor: [-3, -76],
        // shadowUrl: 'my-icon-shadow.png',
        shadowSize: [68, 95],
        shadowAnchor: [22, 94],
      })

      // 进行图层控制 添加的时候将图层为单位
      let markerLayer = L.layerGroup()
      let lineLayer = L.layerGroup()
      // 标记线路
      var polyline = L.polyline(latlngArr, { color: 'red' }).addTo(lineLayer)
      var popup = L.popup()
      // 同时标记点位信息
      for (i = 0; i < latlngArr.length; i++) {
        popup
          .setLatLng(latlngArr[i])
          .setContent('<p>Hello world!<br />This is a nice popup.</p>')
          .openOn(map)
        let marker = L.marker(latlngArr[i], { icon: myIcon }).addTo(markerLayer)
        marker.bindTooltip(`点位信息`)
      }

      // 添加点位信息
      document.getElementById('buttonOne').addEventListener('click', () => {
        markerLayer.addTo(map)
      })

      // 添加线路信息
      document.getElementById('buttonTwo').addEventListener('click', () => {
        lineLayer.addTo(map)
      })

      // 清除点位
      document.getElementById('buttonThree').addEventListener('click', () => {
        markerLayer.removeFrom(map)
      })
      // 清除点位
      document.getElementById('buttonFour').addEventListener('click', () => {
        lineLayer.removeFrom(map)
      })
    </script>
  </body>
</html>
